import HomePage from '@pages/HomePage/ui/HomePage/HomePage'
import { AuthContext } from '@shared/lib/context/AuthContext'
import { useAppDispatch, useAppSelector } from '@shared/lib/hooks/redux'
import { useResize } from '@shared/lib/hooks/useResize'
import { UiActions } from '@shared/lib/store/UiSlice'
import { Grid } from '@shared/ui/Grid'
import { Popup } from '@shared/ui/Popup'
import { Content } from '@widgets/Content'
import { Header } from '@widgets/Header'
import { Sidebar } from '@widgets/Sidebar'
import { useContext } from 'react'
import { AppRouter } from './providers/router'
import { AppState } from './providers/store/store'
import styles from './App.module.scss'

export const App = () => {
  const isActive = useAppSelector((state: AppState) => state.ui.popup.isActive)
  const children = useAppSelector((state: AppState) => state.ui.popup.children)
  const dispatch = useAppDispatch()
  const onPopupClose = () => {
    dispatch(UiActions.closePopup())
  }
  const { user } = useContext(AuthContext)
  const { isScreenMd } = useResize()
  const sidebarWidth = isScreenMd ? '257px' : '60px'

  return (
    <>
      {!user?.id && <HomePage />}
      <Grid className={styles.app} columns={`${sidebarWidth} calc(100% - ${sidebarWidth})`} gap={0}>
        {user?.id && (
          <>
            <Sidebar />
            <Content>
              <Header />
              <AppRouter />
            </Content>
          </>
        )}
        <Popup animation fullHeight isActive={isActive} onClose={onPopupClose}>
          {children}
        </Popup>
      </Grid>
    </>
  )
}
